<template>
    <div v-bind:style="{height:activityHeight}">
            <div class="workGroup" >
                <!-- 組内信息 -->
                <Row>
                    <Col span="7">
                        <div class="workGroupNav" v-bind:style="{height:GroupHeight}">
                            <span>出勤情况</span>
                            <Tabs >
                                <TabPane  v-for="(item,index) in attendance " :label="'组'+(index+1)" size="small" :value="item.late" :key="item.late">
                                    <p >出勤情况如下：</p>
                                    <p >未出勤：{{item.unattendance}}人</p>
                                    <p >迟到：{{item.late}}人</p>
                                    <p >早退：{{item.leftearly}}人</p>
                                </TabPane>
                            </Tabs>
                        </div>
                        <div class="workLoginNav" v-bind:style="{height:LoginHeight}">
                            <span>消息中心</span>
                            <p>今日班次:{{todayClassType || "暂无"}}</p>
                            <p >出勤情况如下：</p>
                            <p >未出勤：1人</p>
                            <p >迟到：0人</p>
                            <p >早退：0人</p>
                        </div>
                    </Col>
                    <!-- 關鍵KPI -->
                    <Col span="16" offset="1">
                    <div class="workTitSty">
                        <p class="workGroupTit">座席状态</p>
                        <Table :height="workGroupNavHeight" :columns="workGroupcolumns" :data="workGroupdata" ></Table>
                    </div>
                    <div class="workTitSty">
                         <p class="workLoginTit">关键指标</p>
                         <Table :height="workLoginHeight"  :columns="workLogincolumns" :data="workLogindata"></Table>
                    </div>
                          <!-- 工單信息 -->


                    </Col>
                </Row>
            </div>

    </div>

</template>
<style scoped>
.workGroup {
  height: 100%;
  margin-bottom: 10px;
}
.workGroupNav {
  width: 100%;
  height: 147px;
  margin-bottom: 10px;
  border: 1px solid #e9eaec;
}
.workGroupNav span {
  width: 100%;
  padding: 0px;
  color: #ffffff;
  background-color: #f85415;
  border-bottom: 1px solid #e9eaec;
  display: block;
  margin-bottom: 3px;
}
.workGroupNav p {
  text-align: left;
  padding-left: 20px;
}
.workGroup .workGroupTit {
  color: aliceblue;
  height: 20px;
  margin-bottom: 10px;

  border: 1px solid #bfbfbf;
  background-color: #f85415;
}
.workPageMaker {
  height: 39%;
  margin-bottom: 15px;
}
.workPageMakerNav {
  width: 100%;
  height: 200px;
  margin-bottom: 10px;
  border: 1px solid #e9eaec;
}
.workPageMakerNav span {
  width: 100%;
  padding: 0px;
  color: #ffffff;
  background-color: #f89515;
  border-bottom: 1px solid #e9eaec;
  display: block;
  margin-bottom: 3px;
}
.workPageMakerNav p {
  text-align: left;
  padding-top: 10px;
  padding-left: 20px;
  padding-bottom: 15px;
}
.workPageMaker .workGroupTit {
  color: aliceblue;
  height: 20px;
  border: 1px solid #bfbfbf;
  background-color: #17679f;
}
.workLoginNav {
  width: 100%;
  height: 170px;
  border: 1px solid #e9eaec;
}
.workLoginNav span {
  width: 100%;
  padding: 0px;
  color: #ffffff;
  background-color: #0fab64;
  border-bottom: 1px solid #e9eaec;
  display: block;
  margin-bottom: 3px;
}
.workLoginNav p {
  text-align: left;
  padding-left: 20px;
}
.workLoginTit {
  color: aliceblue;
  height: 20px;
  border: 1px solid #bfbfbf;
  background-color: #f89515;
}
.workTitSty {
  margin-bottom: 10px;
}
</style>
<script>
import homeService from "service/homeService.js";
import {
  mapGetters
} from 'vuex'
export default {
  name: "main",
  data() {
    return {
      screenWidth: document.body.clientWidth,
      pickerSize: "large",
      PickerConfirm: true,
      PickerEditable: false,
      workGroupNavHeight: "130",
      workPageMakerHeight: "150",
      workLoginHeight: "170",
      GroupHeight: "200",
      PageMakerHeight: "",
      LoginHeight: "",
      activityHeight: "0px",
      todayClassType:"",
      //   出席情况
      attendance:[
          {
             unattendance:23,
             late:33,
             leftearly:12
          },
          {
             unattendance:23,
             late:33,
             leftearly:12
          },
          {
             unattendance:23,
             late:33,
             leftearly:12
          },
          {
             unattendance:23,
             late:33,
             leftearly:12
          }
      ],
      // workGroup
      workGroupcolumns: [
        {
          title: "坐席总数",
          key: "name"
        },
        {
          title: "空闲坐席总数",
          key: "age"
        },
        {
          title: "置忙坐席总数",
          key: "address"
        },
        {
          title: "通话坐席数量",
          key: "address"
        }
      ],
      workGroupdata: [
        {
          name: "John Brown",
          age: 18,
          address: "New York No. 1 Lake Park",
          date: "2016-10-03"
        },
        {
          name: "Jim Green",
          age: 24,
          address: "London No. 1 Lake Park",
          date: "2016-10-01"
        },
        {
          name: "Joe Black",
          age: 30,
          address: "Sydney No. 1 Lake Park",
          date: "2016-10-02"
        },
        {
          name: "Jon Snow",
          age: 26,
          address: "Ottawa No. 2 Lake Park",
          date: "2016-10-04"
        },
        {
          name: "John Brown",
          age: 18,
          address: "New York No. 1 Lake Park",
          date: "2016-10-03"
        },
        {
          name: "Jim Green",
          age: 24,
          address: "London No. 1 Lake Park",
          date: "2016-10-01"
        },
        {
          name: "Joe Black",
          age: 30,
          address: "Sydney No. 1 Lake Park",
          date: "2016-10-02"
        },
        {
          name: "Jon Snow",
          age: 26,
          address: "Ottawa No. 2 Lake Park",
          date: "2016-10-04"
        }
      ],
      workLogincolumns: [
        {
          title: "进线量",
          key: "name"
        },
        {
          title: "接起量",
          key: "age"
        },
        {
          title: "服务水平",
          key: "address"
        }
      ],
      workLogindata: [
        {
          name: "John Brown",
          age: 18,
          address: "New York No. 1 Lake Park",
          date: "2016-10-03",
          num: "2016-10-03",
          num: "2016-10-03",
          num: "2016-10-03",
          num: "2016-10-03",
          num: "2016-10-03"
        },
        {
          name: "Jim Green",
          age: 24,
          address: "London No. 1 Lake Park",
          date: "2016-10-01",
          num: "2016-10-03",
          num: "2016-10-03",
          num: "2016-10-03",
          num: "2016-10-03",
          num: "2016-10-03"
        },
        {
          name: "Joe Black",
          age: 30,
          address: "Sydney No. 1 Lake Park",
          date: "2016-10-02",
          num: "2016-10-03",
          num: "2016-10-03",
          num: "2016-10-03",
          num: "2016-10-03",
          num: "2016-10-03"
        },
        {
          name: "Jon Snow",
          age: 26,
          address: "Ottawa No. 2 Lake Park",
          date: "2016-10-04",
          num: "2016-10-03",
          num: "2016-10-03",
          num: "2016-10-03",
          num: "2016-10-03",
          num: "2016-10-03"
        },
        {
          name: "John Brown",
          age: 18,
          address: "New York No. 1 Lake Park",
          date: "2016-10-03",
          num: "2016-10-03",
          num: "2016-10-03",
          num: "2016-10-03",
          num: "2016-10-03",
          num: "2016-10-03"
        },
        {
          name: "Jim Green",
          age: 24,
          address: "London No. 1 Lake Park",
          date: "2016-10-01",
          num: "2016-10-03",
          num: "2016-10-03",
          num: "2016-10-03",
          num: "2016-10-03",
          num: "2016-10-03"
        },
        {
          name: "Joe Black",
          age: 30,
          address: "Sydney No. 1 Lake Park",
          date: "2016-10-02",
          num: "2016-10-03",
          num: "2016-10-03",
          num: "2016-10-03",
          num: "2016-10-03",
          num: "2016-10-03"
        },
        {
          name: "Jon Snow",
          age: 26,
          address: "Ottawa No. 2 Lake Park",
          date: "2016-10-04",
          num: "2016-10-03",
          num: "2016-10-03",
          num: "2016-10-03",
          num: "2016-10-03",
          num: "2016-10-03"
        }
      ]
    };
  },
  computed: {
    ...mapGetters({
      loginUserInfo: 'loginUserInfo',
    }),
  },
  methods: {
    makeHeight() {
      let winHeight = 0;
      let _this = this;
      if (window.innerHeight) winHeight = window.innerHeight;
      else if (document.body && document.body.clientHeight)
        winHeight = document.body.clientHeight;
      // 通过深入 Document 内部对 body 进行检测，获取窗口大小
      if (
        document.documentElement &&
        document.documentElement.clientHeight &&
        document.documentElement.clientWidth
      ) {
        winHeight = document.documentElement.clientHeight;
        // winWidth = document.documentElement.clientWidth;
      }
      _this.activityHeight = winHeight - 90 - 90 + "px";
      _this.workGroupNavHeight = (winHeight - 90 - 90) * 0.47 - 15;
      _this.GroupHeight = (winHeight - 90 - 90) * 0.5 + "px";
      // _this.workPageMakerHeight =  (winHeight-90)*0.39-15;
      _this.PageMakerHeight = (winHeight - 90 - 90) * 0.39 + "px";
      _this.workLoginHeight = (winHeight - 90 - 90) * 0.47 - 15;
      _this.LoginHeight = (winHeight - 90 - 90) * 0.47 + "px";
      return winHeight;
    },
    async getClassGradeInfo(data) {
      let vm = this;
      if(!this.loginUserInfo.userId){
          return false;
      }
      var date = data ? data :vm.getTodayDate()
      let jsondata = await homeService.classGradeInfo({
        userId: this.loginUserInfo.userId,
        arrangeDate: date
      });
      vm.classInfo= jsondata;
      if(vm.classInfo){
          vm.todayClassType=jsondata.classesName;
      }
    },
    getTodayDate(){
        var date = new Date();
        var seperator1 = "-";
        var seperator2 = ":";
        var month = date.getMonth() + 1;
        var strDate = date.getDate();
        if (month >= 1 && month <= 9) {
            month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
            strDate = "0" + strDate;
        }
        var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate
        return currentdate;
    }
  },
  watch: {
    screenWidth(val) {
      if (!this.timer) {
        this.screenWidth = val;
        this.timer = true;
        let that = this;
        setTimeout(function() {
          // that.screenWidth = that.$store.state.canvasWidth
          console.log(that.screenWidth);
          that.init();
          that.timer = false;
        }, 400);
      }
    },
    loginUserInfo(newVal, oldVal) {
         this.getClassGradeInfo()
    }
  },
  mounted() {
    this.makeHeight();
    this.getClassGradeInfo();
    const that = this;
    window.onresize = () => {
      return (() => {
        // window.screenWidth = document.body.clientWidth
        // that.screenWidth = window.screenWidth
        this.makeHeight();
      })();
    };
  }
};
</script>
